<template>
    <el-row style="background-color:#ececec ;">
      <el-col :span="3">
      </el-col>
      <el-col :span="18">
        <h1 class="vesselParticularSiteTitle">船舶指南</h1>
      </el-col>
      <el-col :span="3">
      </el-col>
    </el-row>
    <el-row style="margin-top:10px">
      <el-col :span="3">
      </el-col>
      <el-col :span="18">
        <el-row>
          <el-col :span="11">
            <!-- <el-input size="large" style="width:60%" v-model="state.searchText" clearable placeholder="请输入港口名称">
              <template #prepend>
                <el-button :icon="Search" />
              </template>
            </el-input> -->
            <el-autocomplete class="inline-input w-50" size="large" v-model="state.searchText" style="width:60%" placeholder="请输入港口名称" clearable :trigger-on-focus="false" :fetch-suggestions="changeserch" @select="handleSearch">
              <template #prepend>
                <el-button :icon="Search" />
              </template>
              <!-- <template #append>
                <el-button size="large" @click="handleSearch" type="primary" style="margin-left:5px">搜索</el-button>
              </template> -->
            </el-autocomplete>
            <el-button size="large" @click="handleSearch" type="primary" style="margin-left:5px">搜索</el-button>
          </el-col>
          <el-col :span="11">
            <el-input size="large" style="width:60%;" v-model="state.countryname" clearable placeholder="请输入国家名称">
              <template #prepend>
                <el-button :icon="Search" />
              </template>
            </el-input>
            <el-button size="large" @click="countrySearch" type="primary" style="margin-left:5px">搜索</el-button>
          </el-col>
          <el-col :span="2" style="display: flex; justify-content: flex-end; align-items: center;">
            <el-button size="large" @click="refresh">
              <el-icon size="large">
                <Refresh />
              </el-icon>
            </el-button>
          </el-col>
        </el-row>
        <el-row style="margin-top:10px">
          <el-table stripe :data="state.tableData" border style="width: 100%">
  
            <el-table-column align="center" label="港口名" min-width="35%">
              <template v-slot="{ row }">
                <span>{{ row.port_name }}</span>
              </template>
            </el-table-column>
  
            <el-table-column align="center" prop="port_id" label="港口ID" min-width="10%" />
  
            <el-table-column align="center" label="国家" min-width="10%">
              <template v-slot="{ row }">
                <span :class="'flag-icon flag-icon-' + row.icon">
                </span>
                <br>
                {{ row.country_cn }}
              </template>
            </el-table-column>
  
            <el-table-column align="center" label="天气" min-width="10%">
              <template v-slot="{ row }">
                <el-icon size="40" v-if="row.weathertype==1">
                  <Pouring />
                </el-icon>
                <el-icon size="40" v-if="row.weathertype==2">
                  <Sunny />
                </el-icon>
                <el-icon size="40" v-if="row.weathertype==3">
                  <PartlyCloudy />
                </el-icon>
                <el-icon size="40" v-if="row.weathertype==4">
                  <MostlyCloudy />
                </el-icon>
                <el-icon size="40" v-if="row.weathertype==5">
                  <Drizzling />
                </el-icon>
              </template>
            </el-table-column>
  
            <el-table-column align="center" prop="time" label="当地时间" min-width="25%" />
  
            <el-table-column align="center" prop="ship_number" label="在港船舶" min-width="10%" />
          </el-table>
          <el-row style="margin-top:10px;width:100% ;display: flex; align-items: center; justify-content: space-between;">
            <span>共 {{ state.numbercount }} 个结果</span>
            <el-pagination v-model:current-page="state.currentPage" background layout="prev, pager, next" :total=state.numbercount @current-change="handlePageChange" style="margin-right: 0;" />
          </el-row>
        </el-row>
      </el-col>
      <el-col :span="3">
      </el-col>
    </el-row>
  </template>
  <script setup>
  import {
    Refresh,
    Pouring,
    Sunny,
    PartlyCloudy,
    MostlyCloudy,
    Drizzling,
  } from "@element-plus/icons-vue";
  // import "flag-icon-css/css/-icons.css";
  import axios from "axios";
  import { onMounted, nextTick, ref, reactive, watch } from "vue";
  import { Search } from "@element-plus/icons-vue";
  const urlGo = import.meta.env.VITE_backurl_go;
  const state = reactive({
    numbercount: 0,
    searchText: "",
    tableData: null,
    countryname: "",
    liststuta: 1,
    countryrecord: "",
    portList: [],
    portrecord: "",
    currentPage: null,
  });
  onMounted(() => {
    get_pageinfo("1");
  });
  
  const refresh = () => {
    get_pageinfo("1");
    state.portrecord = "";
    state.countryname = "";
    state.searchText = "";
    state.countryrecord = "";
  };
  
  const get_pageinfo = (number) => {
    axios({
      method: "get",
      url: urlGo + "/port/getPortListByPage",
      params: {
        page: number,
        pageSize: "10",
      },
    })
      .then((res) => {
        // console.log(res.data.data.portList);
        state.numbercount = res.data.data.count;
        state.tableData = res.data.data.portList.map((item) => {
          const match = item.country.match(/\(([A-Za-z]+)\)/);
          item.icon = match ? match[1].toLowerCase() : null;
          item.weathertype = Math.floor(Math.random() * 5) + 1;
          item.time = calculateLocalTime(item.lon);
          item.ship_number = Math.floor(Math.random() * 201);
          state.liststuta = 1;
          return item;
        });
        // console.log(state.tableData);
      })
      .catch((error) => {
        console.error("getPortListByPage error: ", error);
      });
  };
  
  const getcountryname = (page, countryName) => {
    axios({
      method: "get",
      url: urlGo + "/port/getPortListByCountryName",
      params: {
        page: page,
        pageSize: "10",
        countryName: countryName,
      },
    })
      .then((res) => {
        // console.log(res.data.data.count);
        state.numbercount = res.data.data.count;
        state.tableData = res.data.data.portList.map((item) => {
          const match = item.country.match(/\(([A-Za-z]+)\)/);
          item.icon = match ? match[1].toLowerCase() : null;
          item.weathertype = Math.floor(Math.random() * 5) + 1;
          item.time = calculateLocalTime(item.lon);
          item.ship_number = Math.floor(Math.random() * 201);
          state.liststuta = 3;
          return item;
        });
      })
      .catch((error) => {
        console.error("getPortListByPage error: ", error);
      });
  };
  
  const calculateLocalTime = (lon) => {
    const currentUTC = new Date();
    const timezoneOffset = Math.round(lon / 15) * 60;
    const localTime = new Date(currentUTC.getTime() + timezoneOffset * 60 * 1000);
    const options = {
      year: "numeric",
      month: "2-digit",
      day: "2-digit",
      hour: "2-digit",
      minute: "2-digit",
      timeZoneName: "short",
    };
    const formattedTime = localTime.toLocaleString("en-US", options);
    return formattedTime;
  };
  
  const handleSearch = () => {
    state.currentPage = 1;
    get_portname("1", state.searchText);
    state.portrecord = state.searchText;
  };
  
  const countrySearch = () => {
    state.currentPage = 1;
    getcountryname("1", state.countryname);
    state.countryrecord = state.countryname;
  };
  
  const changeserch = (queryString) => {
    state.portList = [];
    axios({
      method: "get",
      url: urlGo + "/port/getPortListByPortName",
      params: {
        page: "1",
        pageSize: "20",
        portName: queryString,
      },
    })
      .then((res) => {
        if (res.data.data.count != 0) {
          var list = res.data.data.portList;
          for (let i = 0; i < list.length; i++) {
            if (state.portList.length <= 100) {
              state.portList.push({
                value: list[i].port_name,
                link: list[i].port_name,
              });
            } else {
              break;
            }
          }
        }
      })
      .catch((error) => {
        console.error("getPortListByPage error: ", error);
      });
    // console.log(state.portList);
    return state.portList;
  };
  
  const get_portname = (pagenumber, portname) => {
    axios({
      method: "get",
      url: urlGo + "/port/getPortListByPortName",
      params: {
        page: pagenumber,
        pageSize: "10",
        portName: portname,
      },
    })
      .then((res) => {
        // console.log(res);
        // console.log(res.data.data.count);
        state.numbercount = res.data.data.count;
        state.tableData = res.data.data.portList.map((item) => {
          const match = item.country.match(/\(([A-Za-z]+)\)/);
          item.icon = match ? match[1].toLowerCase() : null;
          item.weathertype = Math.floor(Math.random() * 5) + 1;
          item.time = calculateLocalTime(item.lon);
          item.ship_number = Math.floor(Math.random() * 201);
          state.liststuta = 2;
          return item;
        });
      })
      .catch((error) => {
        console.error("getPortListByPage error: ", error);
      });
  };
  
  const handlePageChange = (pageNumber) => {
    if (state.liststuta == 1) {
      get_pageinfo(pageNumber.toString());
    }
    if (state.liststuta == 2) {
      get_portname(pageNumber, state.portrecord);
    }
    if (state.liststuta == 3) {
      getcountryname(pageNumber, state.countryrecord);
    }
  };
  </script>
  
  <style lang="less" scoped>
  .vesselParticularSiteTitle {
    font-size: 36px;
    line-height: 48px;
    margin-bottom: 5px;
    margin-bottom: 5px;
    color: #339eff;
    font-family: SimSun;
  }
  </style>